<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>新大楼会议室预订系统登陆</title>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta name="keywords" content="登陆，会议室，预定，预定系统，同花顺">
      <meta name="description" content="同花顺新大楼会议室预订系统">
      <!-- 引入 Bootstrap -->
      <link href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
      <link rel="stylesheet" href="css/responsive-nav.css">
      <link rel="stylesheet" href="css/fm.selectator.jquery.css"/>
      <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
      <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
      <!--[if lt IE 9]>
         <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
         <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
      <![endif]-->

      <style type="text/css">
      html,body{font-family: "微软雅黑";    padding: 0px !important; margin: 0px !important;direction: ltr;font-size:14px;height:100%;}
      .navbox{background:#212121;margin:0;}
      .navbar{min-height:40px;border:none;}
      .navbar-brand {height: 40px;padding: 12px 15px;color:#fff;font-weight:bolder;}
      .navbar-brand:hover,.navbar-brand:focus{color:#fff;}
      .navbar-header .admin_logo{height:40px;width:40px;float: left;margin-left:10px;padding:2%;}
      .navbar-header .admin_logo .admin_logo_logo{height:100%;width:100%;background:url("images/adminlogo.png") no-repeat;background-size:100% 100%;}
      .navbar-text{text-align:right;margin:0;line-height:40px;padding-right:6px;color: #fff;}
      .navbar-text span{font-weight:bold;margin-right:6px;}
      .navbar-text a{font-weight: bold;transition:all 0.2s ease;color:#999;}
      .navbar-text a:hover{transition:all 0.2s ease;color: #C75151;}
      /*nav结束*/
      .content_box {padding-top: 40px;height:100%;}
      .content_box .navbar_left{height:100%;margin:0;}
      .leftnav{width:225px;padding:0;background: #3d3d3d;}
      .leftnav ul{width:100%;padding-top: 20px;}
      .navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:hover, .navbar-default .navbar-nav>.active>a:focus {color: #fff;background-color: #C75151;}
      .active{position:relative;}
      .navbar-default .navbar-nav>li>a {color: #444;}
      .navbar-nav{margin:0;}
      .navbar-toggle{margin:0;margin-top:4px;}
      .navbar-toggle span{background:#5A5A5A;}
      .navbar-default .navbar-nav>li>a {
              color: #FFF;
          }
      .navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus{color:#fff;}

      .navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
        color: #999;
        background-color: #3D3D3D;}
      .open>.dropdown-menu{background:#3d3d3d;}
      .dropdown-menu>li>a{color:#bdbdbd;}
      /*正文*/
      .bt_cotent{width:100%;}
      .bt_cotent .cont_content{margin-left:225px;}
      .bt_cotent .cont_content .yd_btn{margin-top:20px;}
      .bt_cotent .cont_content .yd_select{margin-top:20px;}
      .table-responsive {margin-top:15px;}
      .s_title{background:#53B2D0;padding:10px;border-radius:6px;color:#fff;}
      .s_title span{display:inline-block;}
      .s_title .information{float:left;}
      .s_title .state{float: right;} 
      .myage .row{margin-top:5px;border-bottom:1px solid #e5e5e5;}
      .clear{clear:both;}
      /* 小型设备（平板电脑，768px 起） */
      @media (max-width: 768px) {
          .bt_cotent{padding-top:20px;}
          .navbar-text{background: #3D3D3D;}
          .navbar-brand{font-size:14px;}
          .user_message{background:#DEDEDE;}
          .leftnav{width:100%;}
          .content_box {padding-top: 59px}
          .leftnav ul li{background: #212121;}
          .navbar-default .navbar-nav .open .dropdown-menu>li>a {
          color: #bdbdbd;}
          .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus{color:#bdbdbd;}
          .bt_cotent .cont_content{width:100%;margin:0;}


       }


      @media (min-width: 768px){

          .leftnav{position: absolute;z-index:2;}
          .bt_cotent{position: absolute;top:0;}
          .navbar-nav>li {float:none;}
          .navbar-collapse.collapse{height:100%!important;}
          .active i{position:absolute;right:0;display:block;height:25px;width:8px;top: 14px;background:url("images/sidebar-menu-arrow.png")no-repeat;}
          .container {width: 525px;}

      }



      @media (min-width: 992px) {
        .container {
            width: 745px; 
        }

      }

      @media (min-width: 1200px){
      .container {
          width: 945px; 
        }
      }

       @media (min-width: 1400px){
      .container {
          width: 1180px; 
        }
      }

      </style>
   </head>
   <body>
     <div class="navbar navbar-fixed-top navbox">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" 
             data-target="#example-navbar-collapse">
             <span class="sr-only">切换导航</span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
          </button>
          <div class="admin_logo">
            <div class="admin_logo_logo"></div>
          </div>
          <a class="navbar-brand" href="#">同花顺会议室预定系统</a>
        </div>
        <div class="user_message">
          <p class="navbar-text navbar-right">
            你好,<span>黄咪丽-权限1</span>
            <a href="#" class="navbar-link">退出</a>
            <a href="#" class="navbar-link">设置</a>
          </p>
        </div>
     </div>



     <div class="page-container row-fluid content_box">
        <div class="navbar navbar-default navbar_left" role="navigation">
           <div class="navbar-header">
           </div>
           <div class="collapse navbar-collapse leftnav" id="example-navbar-collapse">
              <ul class="nav navbar-nav">
                 <li>
                    <a href="#">首页</a>
                    <i></i>
                  </li>
                 <li class="active">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                       我的会议<b class="caret"></b>
                    </a>
                    <i></i>
                    <ul class="dropdown-menu">
                       <li><a href="#">我预定的会议</a></li>
                       <li><a href="#">我参与的会议</a></li>
                    </ul>
                 </li>
              </ul>
           </div>
            <div class="bt_cotent">
              <div class="cont_content">
                <div class="container">
                  <h3>
                    我参与的会议室
                    <small>我参与的会议室状态及预订</small>
                  </h3>

                  <div class="row">
                      <div class="col-xs-12 col-sm-12 yd_btn">
                         <div role="form">
						  <div class="form-group">
						    <label for="name">请输入会议ID</label>
						    <input type="text" class="form-control" placeholder="请输入会议ID">
						  </div>
						 </div>
                      </div>
                  </div>
                  <div class="row yd_select">
                      <div class="col-xs-6 col-sm-4">
                         <div class="form-group">
                            <label>起始日期:</label>
                            <input type="text" class="form-control" style="cursor: pointer;" 
                             readonly="readonly" onClick="WdatePicker()">
                        </div>
                      </div>
                      <div class="col-xs-6 col-sm-4">
                         <div class="form-group">
                            <label>终止日期:</label>
                            <input type="text" class="form-control" style="cursor: pointer;" 
                             readonly="readonly" onClick="WdatePicker()">
                        </div>
                      </div>
                      <div class="col-xs-12 col-sm-4 yd_btn">
                        <button type="button" class="btn btn-primary btn-lg btn-block">搜索</button>
                      </div>
                </div>
                <div class="row">
                  <div class="col-xs-12 col-sm-12">
                      <div class="table-responsive">
                         <table class="table table-bordered">
                            <caption style="color:red;">说明：带有“*”的会议室有电视机</caption>
                            <thead>
                               <tr>
                                  <th>会议id</th>
                                  <th>会议名称</th>
                                  <th>会议地址</th>
                                  <th>会议开始时间</th>
                                  <th>会议结束时间</th>
                                  <th>状态</th>
                                  <th>操作</th>
                               </tr>
                            </thead>
                            <tbody>
                               <tr>
                                  <td>1123</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>
                                  	<button  class="btn btn-info" data-toggle="modal" data-target="#mymessage">查看详情</button>
                                  	<button  class="btn btn-danger" data-toggle="modal" data-target="#delete">删除</button>
                                  </td>
                               </tr>
                               <tr>
                                  <td>1233</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>
                                  	<button class="btn btn-info" data-toggle="modal" data-target="#mymessage">查看详情</button>
                                  	<button class="btn btn-danger" data-toggle="modal" data-target="#delete">删除</button>
                                  </td>
                               </tr>
                               <tr>
                                  <td>1232</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>
                                  	<button  class="btn btn-info" data-toggle="modal" data-target="#mymessage">查看详情</button>
                                  	<button  class="btn btn-danger" data-toggle="modal" data-target="#delete">删除</button>
                                  </td>
                               </tr>
                               <tr>
                                  <td>32323</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>1</td>
                                  <td>
                                  	<button class="btn btn-info">查看详情</button>
                                  	<button class="btn btn-danger">删除</button>
                                  </td>
                               </tr>
                            </tbody>
                         </table>
                      </div>    
                  </div>
                </div>
            </div>
        </div>
     </div>

     <!--详情页弹出层-->
     <!-- 模态框（Modal） -->
	<div class="modal fade" id="mymessage" tabindex="-1" role="dialog" 
	   aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" 
	               data-dismiss="modal" aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               会议 ID123456
	            </h4>
	         </div>
	         <div class="modal-body">
	         	<div class="myage">
		            <p class="s_title">
		            	<span class="information">会议基本信息</span>
		            	<span class="state">状态:未开始</span>
		            	<span class="clear"></span>
		            </p>
		            <div class="row">
		            	<p class="col-xs-6 col-sm-6"><b>会议ID：</b>12345(2016-04-27 16:21预定)</p>
		            	<p class="col-xs-6 col-sm-6"><b>预订者：</b>黄咪丽</p>
		            </div>
		            <div class="row">
		            	<p class="col-xs-6 col-sm-6"><b>会议地址：</b>8楼 临冬城</p>
		            	<p class="col-xs-6 col-sm-6"><b>会议主题：</b>这里写会议主题</p>
		            </div>
		            <div class="row">
		            	<p class="col-xs-6 col-sm-6"><b>会议开始时间：</b>2016-04-27 19:00</p>
		            	<p class="col-xs-6 col-sm-6"><b>会议结束时间：</b>2016-04-27 21:00</p>
		            </div>
		            <div class="row">
		            	<p class="col-xs-6 col-sm-6"><b>参会人名单：</b>黄咪丽（接受）、黄咪丽（待定）、黄咪丽（拒绝）、黄咪丽（未读)</p>
		            	<p class="col-xs-6 col-sm-6"><b>会议人数：</b>10人</p>
		            </div>

		            <p class="s_title">
		            	<span class="information">会议联系人信息</span>
		            	<span class="clear"></span>
		            </p>
		            <div class="row">
		            	<p class="col-xs-6 col-sm-6"><b>联系人姓名：</b>黄咪丽</p>
		            	<p class="col-xs-6 col-sm-6"><b>联系人部门：</b>i问财</p>
		            </div>
		            <div class="row">
		            	<p class="col-xs-6 col-sm-6"><b>联系人邮箱：</b>huangmili@myhexin.com</p>
		            	<p class="col-xs-6 col-sm-6"><b>联系人电话：</b>公司分机号/15557100706</p>
		            </div>
		         </div>
	         </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">确定
	            </button>
	         </div>
	      </div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>


     <!--删除弹出层-->
     <div class="modal fade" id="delete" tabindex="-1" role="dialog" 
	   aria-labelledby="myModalLabel" aria-hidden="true">
	   <div class="modal-dialog">
	      <div class="modal-content">
	         <div class="modal-header">
	            <button type="button" class="close" 
	               data-dismiss="modal" aria-hidden="true">
	                  &times;
	            </button>
	            <h4 class="modal-title" id="myModalLabel">
	               删除信息
	            </h4>
	         </div>
	         <div class="modal-body">
	            确定要删除此条信息吗？
	         </div>
	         <div class="modal-footer">
	            <button type="button" class="btn btn-default" 
	               data-dismiss="modal">取消
	            </button>
	            <button type="button" class="btn btn-primary">
	               确定
	            </button>
	         </div>
	      </div><!-- /.modal-content -->
		</div><!-- /.modal -->
	</div>

      <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
      <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
      <!-- 包括所有已编译的插件 -->
      <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
      <!--nav导航-->
      <script src="js/responsive-nav.js"></script>
       <!--日期插件-->
      <script src="js/WdatePicker.js"></script>
       <!--多选下拉菜单-->
      <script src="js/fm.selectator.jquery.js"></script>


      <script type="text/javascript">
        $(function () {
            $("#startTime").change(function () {  
            var stime = $("#startTime  option:selected").text();
            var shour = stime.substring(0,2);
            var smin  = stime.substring(3,5);
            $("#endTime").empty();
            for (var i = shour; i < 22; i++) {
              if (smin=="00") {
                  jQuery("<option>"+i+":"+smin+"</option>").appendTo("#endTime");
                  jQuery("<option>"+i+":30"+"</option>").appendTo("#endTime");
              }else{
                  jQuery("<option>"+i+":"+smin+"</option>").appendTo("#endTime");
                  jQuery("<option>"+(i*1+1)+":00"+"</option>").appendTo("#endTime");
              };
            };
            if(smin!="00"){
              jQuery("#endTime option:last").remove();
            }
            jQuery("#endTime option:first").remove();
          });  
          $("#startTime").trigger("change");  


          $("#searchtable").click(function(){
            var floor = $("#floor").val();
            var date = $("#floordata").val();
            alert(floor+"---"+date);
        })

        });

      </script>


   </body>
</html>
